NativeScript React — Action Items, Button, Date Pickers, and Frames

React is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript React.

ActionItem

We can add the actionItem component to add buttons into the actionBar component.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  const onTapShare = () => console.log('tap share')
  const onTapDelete = () => console.log('tap delete')
  return (
    <frame>
      <page>
        <actionBar>
          <actionItem
            nodeRole="actionItems"
            onTap={onTapShare}
            android={{
              systemIcon: "ic_menu_share" as const,
              position: "actionBar" as const
            }}
          />
          <actionItem
            nodeRole="actionItems"
            onTap={onTapDelete}
            android={{
              systemIcon: "" as const,
              position: "popup" as const
            }}
            text="delete"
          />
        </actionBar>
        <flexboxLayout justifyContent='center'>
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the actionItem with the onTap prop to listen for taps on the item.

The android prop sets the icon for the action item and the position.

systemIcon sets the icon.

position sets the location of the action item.

'popup' will put it on a menu.

The text prop is the text of the popup menu item.

We can set the visibility prop to make an item visible or not.

To do this, we write:

import * as React from "react";

export default function Greeting({ }) {
  const [isEditing, setIsEditing] = React.useState(true)
  const onTapEdit = () => setIsEditing(isEditing => !isEditing)
  const onTapSave = () => setIsEditing(isEditing => !isEditing)
  return (
    <frame>
      <page>
        <actionBar>
          <actionItem
            nodeRole={"actionItems"}
            onTap={onTapEdit}
            visibility={isEditing ? "hidden" : "visible"}
            android={{
              systemIcon: "ic_menu_edit",
              position: "actionBar" as const
            }}
          />
          <actionItem
            nodeRole={"actionItems"}
            onTap={onTapSave}
            visibility={isEditing ? "visible" : "hidden"}
            android={{
              systemIcon: "ic_menu_save",
              position: "actionBar" as const
            }} />
        </actionBar>
        <flexboxLayout justifyContent='center'>
        </flexboxLayout>
      </page>
    </frame>
  );
}

We set the isEditing state to pick which icon is displayed.

Is the visbility prop is set to 'visible' , then it’s displayed.

Button

We can add a button with the button component.

For instance, we can write:

import * as React from "react";
import { EventData } from "[@nativescript/core](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fnativescript%2Fcore "Twitter profile for @nativescript/core")";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <flexboxLayout justifyContent='center' flexDirection="column">
          <button
            text="Button"
            onTap={({ object }: EventData) => {
              console.log(object);
            }}
          />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the button with the text prop to set the button text.

The onTap prop takes a function that has the event data as the parameter.

The object property has the button that we clicked on.

DatePicker

We can add a DatePicker component to add a date picker to our app.

For instance, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <flexboxLayout justifyContent='center' flexDirection="column">
          <datePicker
            date={new Date()}
            onDateChange={({ value }) => {
              console.log(value)
            }}
          />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the date picker with the datePicker component.

Then we listen for the date picker value changes with the onDateChange prop.

We get the latest selected date with the value property of the parameter.

Frame

We add the frame component to display page components.

Every app needs at least one frame element.

For example, we can use it by writing:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout justifyContent='center' >
          <label text="Default Page Content" />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the page component in the frame .

Then we can add anything into the page component.

Conclusion

We can add items to action bars, buttons, date pickers, and frames as containers for content into our mobile app with React NativeScript.